let that //绑定that成为new中的this实例对象
// 创建class对象
class Tabs {
  constructor(id) {
    // 绑定that
    that = this
    // 得到this main的DOM元素
    this.main = document.querySelector(id)
    // 切换部分的核心思路：先得到元素，然后进行拍他思想，添加class内容
    // 得到点击切换的DOM元素
    // 获得ul的DOM元素
    this.ul = this.main.querySelector('.firstNav ul')
    // 获得sectionFatherDOM元素
    this.sectionsFather = this.main.querySelector('.tabscon')
    // 获取添加事件的元素
    // 添加部分的核心思路：先得到元素，绑定添加事件，事件中清除默认样式后设置新增加的li和section的默认模板样式,然后通过insertAdjacentHTML进行修改样式，最后重新init渲染
    this.addBtn = this.main.querySelector('.tabadd')
    // 利用new的过程，成功调用init函数
    this.init()
  }
  // 初始化绑定事件
  init() {
    // 将lis和section元素获得放在初始化绑定事件这里
    this.lis = this.main.querySelectorAll('.firstNav li')
    // 得到点击切换后页面显示效果改变的元素
    this.sections = this.main.querySelectorAll('.tabscon section')
    // 获取删除事件的元素
    this.delBtn = this.main.querySelectorAll('.firstNav li .icon-guanbi')
    // 绑定事件
    this.lis.forEach(item => {
      item.addEventListener('click', this.SwitchTabs)
    })
    // 绑定添加事件
    this.addBtn.addEventListener('click', this.addTabs)
    // 绑定删除事件
    this.delBtn.forEach((item, index) => {
      item.index = index
      item.addEventListener('click', this.delTabs)
    })
  }

  // 清除默认样式排他思想
  clearClassTabs() {
    // 清除li的
    this.lis.forEach((item, index) => {
      item.index = index
      item.className = ''
    })
    // 清除section的
    this.sections.forEach(item => {
      item.className = ''
    })
  }
  // 切换样式的函数
  SwitchTabs() {
    // 调用清除样式
    that.clearClassTabs()
    // 给当前事件加上className
    this.className = 'liactive'
    // 通过clearClassTabs中foreach遍历传递过来的index参数
    that.sections[this.index].className = 'conactive'
  }
  // 添加样式的函数
  addTabs() {
    // 清除默认样式
    that.clearClassTabs()
    // 设定li和section的模板内容
    let li = `<li class="liactive"><span>测试用例子</span><span class="iconfont icon-guanbi"></span></li>`
    let section = `<section class="conactive">测试测试</section>`
    // 操作DOM元素
    that.ul.insertAdjacentHTML('beforeend', li)
    that.sectionsFather.insertAdjacentHTML('beforeend', section)
    // 重新初始化
    that.init()
  }
  // 删除样式函数
  delTabs(e) {
    this.parentNode.remove()
    that.sections[this.index].remove()
    console.log(e.target.parentNode.previousSibling)
  }
}
new Tabs('#tab')
